<template>
<div class="transport-content-box seaway-content">
        <!-- banner图 -->
        <div class="h-banner">
        </div>
        <!-- 热门路线 -->
        <div class="h-hot-way container-1200">
            <div class="h-hot-title">
                  <span></span>
                  <span>热门海路运输线路</span>
                  <img src="./../.././static/img/index/hot.png">
            </div>
            <div class="h-hot-city">
              <ul>
                <li v-for="(item,index) in hotLineList" :key="index" @click="changeCity(item)">
                    <!-- <nuxt-link :to="'/transport/list?fromCity='+item.fromCity+'&toCity='+item.toCity"> -->
                      <span>{{item.fromCity}}</span>
                      <span></span>
                      <span>{{item.toCity}}</span>
                    <!-- </nuxt-link> -->
                </li>
              </ul>
            </div>
        </div>
         <!-- 出发地 -->
        <div class="h-start-place">
             <div class="container-1200 start-box">
                  <a-form>
                      <a-row :gutter='24' class='city-form'>
                        <a-col :span='6' class='h-place-190'>
                            <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                                <a-input  placeholder="请选择出发地"  v-model="fromCity" readOnly @click="magSvgShowMap('departureCar')"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span='6' class='h-place-190'>
                            <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                                <a-input  placeholder="请选择车辆到达地" v-model="toCity" readOnly @click="magSvgShowMap('destinationCar')"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span='6'>
                            <a-button type="primary" :span='2' style='margin-right:10px;' class='ant-btn-primary' @click="lineGetSelectLines">搜索</a-button>
                            <a-button :span='2' @click="reset">重置</a-button>
                        </a-col>
                  </a-row>
                </a-form>
             </div>
        </div>
        <!-- 海运信息 -->
        <div  class='h-information road-detail-content container-1200'>
              <div class="h-info-title">
                   <span></span>
                   <span>海运信息</span>
              </div>
              <div class="sea-box-container">
                  <ul>
                    <li v-for="(item,index) in highwayList" :class="item.dictKey==transType?'active':''" :key="index" :value="item.dictKey" @click="tabChange(item.dictKey)">{{item.dictValue}} </li>
                  </ul>
              </div>
            <!--   <a-tabs defaultActiveKey="1" @change="tabChange">
                  <a-tab-pane tab="海路整箱" key="37"></a-tab-pane>
                  <a-tab-pane tab="海运拼箱" key=""></a-tab-pane>
                  <a-tab-pane tab="海运散杂" key="3"></a-tab-pane>
              </a-tabs> -->
              <div class="all-ways">
                <a-list itemLayout="vertical" size="large" :dataSource="listData" :pagination="pagination">
                    <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                      <div class="road-box-conent">
                            <div class="road-pic">
                                <img :src="item.companyPic||'http://124.207.149.202/wly/static/img/chain/gy1-1.jpg'">
                            </div>
                            <div class="road-name">
                                <span>出发地:<i class="road-city-name">{{item.beginPlace}}</i></span>
                                <span>到达地:<i  class="road-city-name">{{item.endPlace}}</i></span>
                                <!-- <span>企业名称:<i  class="road-city-name">{{item.companyName}}</i></span> -->
                                <span>线路介绍:<i class="road-black wy-text-nowrap">{{item.description||'暂无'}}</i></span>
                               <!--  <span>地址:<i class="road-black">{{item.detailAddress||'暂无'}}</i></span> -->
                            </div>
                      </div>
                      <div v-if="item.lineType==4" class="road-box-conent sea-road">
                          <div>
                                <p><i class="road-city-name">海运</i></p>
                                <!-- <span class="seaC">海运公司:
                                  <i class="road-black">{{item.seaCompany}}</i>
                                </span> -->
                                <table>
                                      <thead>
                                          <th>20’</th>
                                          <th>40’</th>
                                          <th>40HQ</th>
                                          <th>45’</th>
                                      </thead>
                                      <tbody>
                                          <tr>
                                              <td class="road-orange">{{item.price_20}}</td>
                                              <td class="road-orange">{{item.price_40}}</td>
                                              <td class="road-orange">{{item.price_40HQ}}</td>
                                              <td class="road-orange">{{item.price_45}}</td>
                                          </tr>
                                      </tbody>
                                </table>
                                <span class="seaTime" v-if="item.validDay">有效期:<i class="road-black road-orange">{{item.validDay}}</i>天</span>
                                <span class="seaTime" v-if="!item.validDay"><i class="road-black">长期有效</i></span>
                          </div>
                      </div>
                      <div class="road-box-conent sea-comp">
                              <p><i class="road-city-name">{{item.companyName}}</i><b v-if="item.status == 1">推荐</b></p>
                              <div class="useStar">
                                  <span>用户星级</span> 
                                  <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                                  <div class="attestaion">{{item.attestationStatusValue}}</div>
                              </div>
                      </div>
                      <div class="road-box-conent">
                          <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                          <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='ant-btn-primary road-sell' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                          <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">立即沟通</a-button></router-link>
                          <nuxt-link :to="'/transport/'+item.lineId">
                              <a-button class='road-detail'>查看详情</a-button>
                          </nuxt-link>
                      </div>
                    </a-list-item>
                </a-list>
              </div> 
              <!-- <a-table rowKey="lineId" :columns="columns" :dataSource="listData" :pagination="pagination" class='infomation-list'>
                  <span slot="watchs" slot-scope="item, record">
                        <nuxt-link :to="`/transport/${record.lineId}`">   查看详情   </nuxt-link>
                 </span>
              </a-table> -->
        </div>
        <Elastic ref='elastic'></Elastic>
          <!-- 提示认证弹框 -->
        <Elastics  ref='elastics'></Elastics>
      <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
</div>
</template>

<script>
import Elastic from '@/components/dialog/Elastic'
import Elastics from '@/components/dialog/Elastics'
import AuthMixin from '~/mixins/auth'
export default {
  mixins: [ AuthMixin ],
  components: {
    Elastic,
    Elastics,
  },
  data() {
    return {
      // 热门
      hotLineList: [], 
      transType: 37,
      // 起运地地址
      departureCar: '',
      destinationCar: '',
      fromCity: '',
      toCity: '',
      beginPlace: '',
      endPlace: '',
      // 数据列表
      listData: [],
    
      highwayList: [],
      // 表格分页
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        current: 1,
        pageSize: 7,
        // showSizeChanger: true,
        total: 0,
        showTotal: (total, range) => `共 ${total} 条记录`,
        onChange: (page) => {
          this.pagination.current = page
          this.lineGetSelectLines()
        }
      },
    }
  },
   beforeCreate() {
    // this.formCar = this.$form.createForm(this);
  },
  created: function() {
    this.infoCommonDict(13);
    this.lineGetLinesHot();
    this.lineGetSelectLines();
  },
  methods: {
      // 弹框
      elasticShowModal(id){
        this.$refs.elastic.showModal(id);
      },
      TipsShowModal(id){
          this.$refs.elastics.warning(id);
      },
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 13: this.highwayList = res.data.rows; break;
              console.log(this.highwayList,12344)
            }
          } 
      },
      // 重置
      reset (){
        this.airTransfer = '';
        this.companyName = '';
        this.fromCity = '';
        this.toCity = '';
        this.lineGetSelectLines();
      },

      // 类型切换
      tabChange (key) {
        this.transType = key;
        this.lineGetSelectLines();
      },
      // 获取热门线路
      async lineGetLinesHot () {
        const res = await this.$store.dispatch('info/lineGetLinesHot',{
          pageSize: 10,
          pageIndex: 1,
          hotLine: 1
        })
        if (res.status) {
          this.hotLineList = res.data;
        } 
      },
      //热门城市搜索
      changeCity(item){
        this.fromCity = item.beginPlace;
        this.toCity = item.endPlace;
        // this.lineGetSelectLines()
      },
      // 获取线路列表
      async lineGetSelectLines () {
          const res = await this.$store.dispatch('info/lineGetSelectLines',{
            lineType: 4,
            // fromCity: this.departureCar,
            companyName: this.companyName,
            // toCity: this.destinationCar,
            beginPlace: this.fromCity,
            endPlace: this.toCity,
            transType: this.transType,
            airTransfer: this.airTransfer,
            pageSize: 7,
            pageIndex: 1,
          })
          if (res.status && res.data) {
            let d = res.data.rows;
            if (d.length) {
              for ( var i = 0;i<d.length;i++ ) {
                //'20‘-'+values.airSeaPrice_1+'|40‘-'+values.airSeaPrice_2+'|20HQ-'+values.airSeaPrice_3+'|45‘-'+values.airSeaPrice_4;
                d[i]['price_20'] = parseInt( d[i].airSeaPrice.split('20‘-')[1])|| ''
                d[i]['price_40'] = parseInt( d[i].airSeaPrice.split('|40‘-')[1])|| ''
                d[i]['price_40HQ'] = parseInt( d[i].airSeaPrice.split('|40HQ-')[1])|| ''
                d[i]['price_45'] = parseInt( d[i].airSeaPrice.split('|45‘-')[1])|| ''
                d[i].lineCycle = this.lineCycleReset(d[i].lineCycle)
                // 20‘-3|40‘-4|40HQ-5|45‘-6
              }
            }
            this.listData = d;
            this.pagination.total = res.data.total;
          }else{
            this.listData = [];
            this.pagination.total = 0;
          }
      },
      // 离港班期显示处理
      lineCycleReset(str) {
        let s = str.replace(/,/g,'')
        let arr = [];
        for ( var i = 0;i<s.length;i++ ) {
          switch(s[i]){
            case '1':
              arr.push('一'); break;
            case '2':
              arr.push('二'); break;
            case '3':
              arr.push('三'); break;
            case '4':
              arr.push('四'); break;
            case '5':
              arr.push('五'); break;
            case '6':
              arr.push('六'); break;
            case '7':
              arr.push('日'); break;
          }
        }
        return String(arr).replace(/,/g,'/')
      },
      // 省市地图回调
      mapSvgCall (d) {
        // this[d.name] = d.city;
        this[d.name] = d.provCityArea;
          if(d.name=='departureCar'){
            this.fromCity = d.provCityArea;
          }
          if(d.name=='destinationCar'){
            this.toCity = d.provCityArea;
        }    
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
@import "./../../assets/css/info/roadDetail.scss";
@import "./../../assets/css/transport/road.scss";
.seaway-content{
  .sea-comp{
    margin-left: 25px;
  }
  .road-name{
    margin-top: 25px;
  }
  .sea-box-container{
    width: 1200px;
    height: 40px;
    ul{
        li{
          float: left;
          width: 120px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          font-size: 16px;
        }
        .active{
          background: #15837A;
          color: #FFFFFF;
        }
        li:hover{
          cursor: pointer;
        }
    }
  } 
}
.seaway-content{
    //轮播
    .h-banner{
      background:url('~static/img/transport/transport2.jpg') center top / cover no-repeat;
    }
    th:nth-child(4){
        .ant-table-column-sorter{
            right:120px !important;
            margin-top:-4px !important;
        }
        .anticon-caret-down{
            display:none !important;
        }
    }
     th:nth-child(7){
        .ant-table-column-sorter{
            right:26px !important;
           margin-top:-6px;
        }
        .anticon-caret-up{
            display:none !important;
        }
    }
  //出发地
   .h-start-place{
     width:100%;
     height:80px;
     background:#F9F9F9;
     margin-top:30px;
     .start-box{
       padding-top:20px;
      .ant-form-item label{
        font-size:16px;
        color:#333333;
      }
      .h-place-190{
         .ant-form-item-control{
           width:190px;
           height:40px;
         }
         input{
            width:190px;
            height:40px;
         }
      }
      .h-place-140{
       .ant-form-item-control{
           width:140px;
           height:40px;
         }
         input{
            width:140px;
            height:40px;
         }
      }
     }
   }
   .ant-table-thead{
       tr:nth-child(2){
         padding:4px 10px !important;
         th{
          padding:4px 10px !important;
         }
         td{
          padding:4px 10px !important;
         }
       }
       .ant-table-column-sorter{
          color:#999999 !important;
       }
     }
     tr,td,th{
        text-align:center;
        font-weight:400 !important;
        padding:4px 10px 0px 10px;
        .ant-table-column-sorter-up.on,.ant-table-column-sorter-down.on{
           color:#15837A !important;
        }
     }
    .ant-table-pagination.ant-pagination{
      float:none !important;
      text-align:center;
    }
     .ant-tabs{
        margin-top:30px;
       .ant-tabs-nav-animated{
          margin-bottom:30px;
       }
     }
     .ant-tabs-nav .ant-tabs-tab{
        color:#333333;
        padding:0px !important;
        width: 90px !important; 
        height: 30px !important;
        line-height: 30px !important;
        text-align: center !important;
        margin:0px !important;
        margin-right:20px !important;
        font-size:16px;
    }
    .ant-tabs-nav .ant-tabs-tab-active{
        background:#15837A !important;
        border-bottom:none;
        color:#FFFFFF !important;
    }
    .ant-tabs-ink-bar{
        bottom:0;
        height:0;
    }
    .ant-tabs-bar{
        border:none;
        margin:0;
    }
     //公共样式
  .all-ways {
     .road-box-conent:nth-child(2){
          margin-top:4px;
          text-align:center;
         .road-orange{
               color:#FFA200;
         }
         p{
          line-height:16px;
          margin-bottom:12px;
         }
         span{
           margin-bottom:12px;
           text-indent:1em;
         }
        span:nth-child(5){
          text-indent:-52px;
        }
        .seaTime{
            margin-top:16px;
        }
      }
    .road-box-conent:nth-child(3){
          //margin-left:68px;
         .road-city-name{
          vertical-align:middle;
        }
    }
  }
  //海路
  .sea-road{
      width:240px !important;
     // margin-left:20px;
      table{
          margin: 0 auto;
      }
      th{
          width:50px;
          text-align:center;
          float: left;
          margin-left:10px;
      }
      th:first-child{
          margin-left:0;
      }
      tr{
          td{
              width:50px;
              text-align:center;
              float: left;
              margin-left:10px;
          }
          td:first-child{
              margin-left:0;
          }
      }
  }
}
</style>